<template>
  <el-container class='elheight'>
    <el-aside class='appTree'>
      <app-tree v-bind:tree-data="treeData" v-on:appTreeClick="treeClickHandle"></app-tree>
    </el-aside>
    <el-main>
      <el-container>
        <el-header class="dzy-main-header">
          <div class="dzy-custom-search-box">
            <div>
              名称：
              <el-input v-model="selectForm.userName" autocomplete="off" clearable class="dzy-custom-input"></el-input>
            </div>
            <div>
              积分类型：
              <el-select v-model="selectForm.scoreTypeId" clearable placeholder="请选择">
                <el-option v-for="(item,index) in integralTypeList" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </div>
            <div>
              开始时间：
              <el-date-picker
                v-model="selectForm.startDate"
                type="date"
                value-format="timestamp"
                format="yyyy 年 MM 月 dd 日"
                placeholder="选择日期">
              </el-date-picker>
              <span> ~ </span>
              结束时间：
              <el-date-picker
                v-model="selectForm.endData"
                type="date"
                value-format="timestamp"
                format="yyyy 年 MM 月 dd 日"
                placeholder="选择日期">
              </el-date-picker>
            </div>
            <div>
              <el-button @click="searchHandleClick" type="primary" icon="el-icon-search">查询</el-button>
            </div>
          </div>
        </el-header>
        <el-main>
          <app-table
            :page-data="pageData"
            :table-columns="tableColumns"
            v-on:checkFlowHandle="integralChangeHandle"
            v-on:currentChange="handleCurrentChange">
          </app-table>
          <el-dialog :title="dialogTitle"
            :visible.sync="dialogFormVisible"
            :before-close="cancel" :close-on-click-modal="false" class="custom-dialog_style">
            <el-form :model="formData">
              <el-form-item label="名称：">
                <el-input v-model="formData.userName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="日期：">
                <el-date-picker
                  v-model="formData.createTime"
                  type="date"
                  value-format="timestamp"
                  format="yyyy 年 MM 月 dd 日"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="积分类型：">
                <el-input v-model="formData.scoreTypeName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="变动前积分：">
                <el-input v-model="formData.scoreBefore" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="变动积分：">
                <el-input v-model="formData.grade" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="变动后积分：">
                <el-input v-model="formData.scoreAfter" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="备注：">
                <el-input type="textarea" v-model="formData.remarks"></el-input>
              </el-form-item>
            </el-form>
          </el-dialog>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import AppTable from '@/components/AppTable'
import AppTree from '@/components/common/AppTree'
import {findPersonalIntegralDetail, findIntegralTypeList, getIntegralDeptTree} from '@/http/integralApi'
export default {
  data () {
    return {
      dialogFormVisible: false,
      pageData: {},
      dialogTitle: '',
      tableColumns: [
        { prop: 'userName', label: '名称' },
        { prop: 'scoreTypeName', label: '积分类型' },
        { prop: 'scoreBefore', label: '变动前分值' },
        { prop: 'grade', label: '变动分值' },
        { prop: 'scoreAfter', label: '变动后分值' },
        { prop: 'createTime', label: '时间', formatter: this.dateFormatter }
      ],
      formData: {},
      selectForm: {},
      integralTypeList: [],
      treeData: []
    }
  },
  components: {
    AppTable,
    AppTree
  },
  mounted () {
    this.getTableData()
    this.getDeptTree()
    this.getIntegralTypeList()
  },
  methods: {
    getDeptTree () {
      getIntegralDeptTree().then(resp => {
        let m = this
        if (resp.code && resp.code === '200') {
          m.treeData = resp.data
        }
      })
    },
    dateFormatter (row, column) {
      let prop = column.property
      if (row[prop] && row[prop] === '') return ''
      let resTime = JSON.parse(row[prop])
      return this.$moment(resTime).format('YYYY-MM-DD H:m:s')
    },
    integralChangeHandle (data) {
      let currentSelectData = JSON.stringify(data.data[data.index])
      this.formData = JSON.parse(currentSelectData)
      this.dialogFormVisible = true
      this.dialogTitle = '查看积分明细'
    },
    getIntegralTypeList () {
      findIntegralTypeList('01').then(resp => {
        if (resp.code && resp.code === '200') {
          this.integralTypeList = resp.data
        }
      })
    },
    cancel () {
      this.dialogFormVisible = false
      this.formData = {}
    },
    getTableData (param) {
      findPersonalIntegralDetail(param).then(resp => {
        if (resp.code && resp.code === '200') {
          this.pageData = resp.data
          this.pageData.isIntegralHandleInline = true
          this.pageData.handleLabel = '查看'
        } else {
          this.$message({
            type: 'info',
            message: resp.message
          })
          return ''
        }
      })
    },
    handleCurrentChange (val) {
      this.selectForm.offset = (val - 1) * 10
      this.getTableData(this.selectForm)
    },
    searchHandleClick () {
      this.selectForm.offset = 0
      this.getTableData(this.selectForm)
    },
    treeClickHandle (data) {
      this.selectForm.deptId = data.id
      this.selectForm.offset = 0
      this.getTableData(this.selectForm)
    }
  }
}
</script>
